<template>
	<view class="question-add">
		<view class="top" style="z-index: 2;">
			<uni-icons style="margin-left: 30rpx;" type="left" size="25" color="#2c2c2c" @click="toBackPage">
			</uni-icons>
			<view style="margin-right: 300rpx;">编辑问题</view>
		</view>
		<view class="add-title">问题标题</view>
		<view class="card">
			<view style="margin-top: 20rpx; margin-left: 20rpx">
				<textarea  :show-confirm-bar="false" v-model="title" style="height: 100rpx"
					placeholder="请输入..." placeholder-style="font-style:italic"></textarea>
			</view>
		</view>
		<view class="add-title">背景描述</view>
		<view class="card">
			<view style="position: relative;">
				<!-- <kn-edit ref="contentEdit" :pageScrollTop="pageScrollTop" v-model="context"></kn-edit> -->
				<HulaEditor editorId="context-editor" ref="context-editor" :height="360"  v-model="context" :showBar="false" />
				<view class="editor-glass" @click="showFormWrapper('context')"></view>
			</view>
		</view>
		
		<view class="tag-area">
			<view class="tag" @click="changeIsSpecial()">
				<uni-icons v-if="isSpecial" type="checkmarkempty" size="20" color="#2c2c2c"></uni-icons>
			</view>
			<view style="margin-left: 20rpx;">发表为专业提问</view>
		</view>
		
		<view class="add-title" v-if="!question.id">个人观点</view>
		<view class="card" v-if="!question.id">
			<view style="margin-top: 20rpx; margin-left: 20rpx">
				<textarea :show-confirm-bar="false" v-model="keyword" style="height: 100rpx"
					placeholder="请输入..." placeholder-style="font-style:italic"></textarea>
			</view>
		</view>
		<view class="add-title" v-if="!question.id">我的回答</view>
		<view class="card" style="margin-bottom: 200rpx" v-if="!question.id">
			<view style="position: relative;">
				<!-- <kn-edit ref="contentEdit" :pageScrollTop="pageScrollTop" v-model="content"></kn-edit> -->
				<HulaEditor editorId="content-editor" ref="content-editor" :height="360" v-model="content" :showBar="false" />
				<view class="editor-glass" @click="showFormWrapper('content')"></view>
			</view>
		</view>

		<view class="footer">
			
			<view class="footer-item" style="width: 150rpx;" @click="createPost(true)">
				<view style="height: 70rpx;width: 70rpx;background-color: #F2F2F2;border-radius: 50%;display: flex;flex-direction: row;justify-content: center;align-items: center;">
					<uni-icons type="folder-add" size="25" color="#A6A6A6"></uni-icons>
				</view>
				<view style="font-size: 24rpx;color: #A6A6A6;margin-top: 10rpx;">存草稿</view>
			</view>
			
			<view class="footer-item">
				<view class="footer-button" @click="addQuestion(false)">
					{{question.id ? '修改' : '发起'}}提问
				</view>
			</view>
		</view>
		<form-wrapper 
			:show="formWrapperShow" 
			:form="wrapperFormValue" 
			:defaultId="chosenFormId"
			@closeWrapper="handleCloseWrapper"
		></form-wrapper>
	</view>
</template>

<script>
	import http from '@/common/service/service.js';
	import FormWrapper from '../../components/editor-wrapper/v3/form-wrapper.vue';
	import HulaEditor from '../../components/editor-wrapper/v3/editor.vue';
	export default {
		components: {
			FormWrapper, HulaEditor
		},
		data() {
			return {
				step: 0,
				question:{},
				title: '',
				context: '',
				keyword: '',
				pageScrollTop: 0,
				content: '',
				isSpecial:false,
				pointAddDTOList: [{
					keyword: '',
					answerAddDTO: {
						content: '',
						visibility:2
					}
				}],
				chosenFormId: '',
				formWrapperShow: false,
				form: [
					{
						id: 'title',
						title: '标题',
						content:'',
						type: 'textarea',
						props: {
							placeholder: '请输入'
						}
					},
					{
						id: 'context',
						title: '背景',
						content:'',
						type: 'rich-text',
						props: {
							placeholder: '请输入',
							height: 480,
						}
					},
					{
						id: 'keyword',
						title: '观点',
						content:'',
						type: 'textarea',
						props: {
							placeholder: '请输入'
						}
					},
					{
						id: 'content',
						title: '回答',
						content:'',
						type: 'rich-text',
						props: {
							placeholder: '请输入',
							height: 480
						}
					},
				]
			};
		},
		onLoad: function(options) {
			if(options.questionId){
				this.question.id = options.questionId
				this.getQuestionInfo()
			}
		},
		onShow: function() {},
		Scroll(e) {
			console.log("滚动", e)
			this.pageScrollTop = e.scrollTop
		},
		methods: {
			getQuestionInfo() {
				this.$api.getQuestionInfo({
					id: this.question.id
				}).then(res => {
					this.question = res.data
					this.title = this.question.title
					this.context = this.question.context
					this.form[1].content = this.context
					this.$forceUpdate()
				})
			},
			addQuestion() {
				this.pointAddDTOList[0].keyword = this.keyword;
				this.pointAddDTOList[0].answerAddDTO.content = this.content;

				this.$api.createQuestion({
					title: this.title,
					context: this.context,
					pointAddDTOList: this.pointAddDTOList
				}).then(res => {
					uni.showModal({
						title: '提示',
						content: '添加成功！点击确认回到主页',
						success(res) {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/modex/modex'
								});
							}
						}
					});
				})
			},
			
			toBackPage() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			
			changeIsSpecial(){
				this.isSpecial = !this.isSpecial
			},
			showFormWrapper(id) {
				this.form[0].content = this.title
				this.form[1].content = this.context
				this.form[2].content = this.keyword
				this.form[3].content = this.content
				this.formWrapperShow = true
				this.chosenFormId = id
				this.$forceUpdate()
			},
			handleCloseWrapper(newFormValue) {
				this.formWrapperShow = false;
				console.log('new form value', newFormValue)
				newFormValue.forEach((item) => {
					this[item.id] = item.props.value
					if (item.type === 'rich-text') {
						this.$refs[`${item.id}-editor`].setContents(item.props.value)
					}
				})
			}
		},
		computed: {
			wrapperFormValue() {
				const form = this.form.map((item) => ({
					...item,
					props: {
						...item.props,
						value: this[item.id],
					},
				}))
				console.log('form', form)
				return form
			}
		}
	};
</script>
<style scoped lang="scss">
	.question-add {
		display: flex;
		flex-direction: column;

		.editor-glass {
			position: absolute;
			z-index: 10;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
		
		.top {
			position: sticky;
			top: 0;
			background-color: white;
			border-bottom: solid thin #d1d1d1;
		
		
			width: 100%;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-top: 100rpx;
			
			// #ifdef H5
			padding-top: 40rpx;
			// #endif
		}


		.add-title {
			width: 690rpx;
			margin-left: 30rpx;
			font-size: 40rpx;
			color: #2c2c2c;
			font-weight: bold;
			margin-top: 30rpx
		}
		.tag-area {
			display: flex;
			flex-direction: row;
			margin-top: 40rpx;
			
			.tag{
				height: 40rpx;
				width: 40rpx;
				border: solid thin gray;
				border-radius: 10rpx;
				margin-left: 30rpx;
				
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
		
		}
		
		
		.card {
			width: 690rpx;
			margin-left: 30rpx;
			
			
			background-color: white;
			box-shadow: 1px 1px 8px 2px #e9eee9;
		
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;
		
		}
		
		.footer {
			position: fixed;
			background-color: #ffffff;
			height: 150rpx;
			
			width: 100%;
			bottom: 0;
			z-index: 3;
			border-top: solid thin #e7e7e7;
		
			display: flex;
			flex-direction: row;
			align-items: center;
		
			.footer-item {
				width: 650rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
		
				.text {
					font-size: 46rpx;
					font-weight: bold;
		
				}
		
				.footer-button {
					padding: 0 200rpx;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background-color: #5DACB1;
					border-radius: 50rpx;
					color: white;
				}
			}
		}
		
	}



	
</style>
